<template>
    <footer class="footer">
        <span class="todo-count"
            >剩余<strong>{{ showArr.length }}</strong></span
        >
        <ul class="filters">
            <li>
                <a :class="{ selected: getSel === 'all' }" href="javascript:;" @click="$emit('tab', 'all')">全部</a>
            </li>
            <li>
                <a :class="{ selected: getSel === 'no' }" href="javascript:;" @click="$emit('tab', 'no')">未完成</a>
            </li>
            <li>
                <a :class="{ selected: getSel === 'yes' }" href="javascript:;" @click="$emit('tab', 'yes')">已完成</a>
            </li>
        </ul>
        <button class="clear-completed" @click="$emit('delAll')">清除已完成</button>
    </footer>
</template>

<script>
export default {
    props: ['showArr', 'getSel'],
}
</script>
